<style include="cr-shared-style md-select">
  cr-dialog {
    --cr-dialog-width: 416px;
  }

  .advanced-settings {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 10px;
    --cr-section-padding: 4px;
    --cr-section-min-height: 45px;
  }

  .cr-row-line {
    --cr-section-min-height: 0px;
  }

  .dropdown-section {
    margin-bottom: var(--cr-form-field-bottom-spacing);
    padding-top: 13px;
  }

  .select-field {
    width: 100%;
  }

  .checkbox-section {
    --cr-checkbox-label-padding-start: 11px;
    margin-bottom: 14px;
  }

  .default-apn-info {
    display: flex;
    margin-bottom: -5px;
    padding-top: 10px;
  }

  .default-apn-info span {
    font-size: 0.6875rem; /* 11px */
  }

  .checkbox-text-area {
    margin: 5px 0;
  }

  iron-icon[icon='cr:info-outline'] {
    --iron-icon-width: 1rem;
    --iron-icon-height: 1rem;
    --iron-icon-fill-color: var(--cr-secondary-text-color);
    margin-inline-end: 8px;
  }
</style>
<cr-dialog id="apnDetailDialog" show-on-attach>
  <div id="apnDetailDialogTitle" slot="title">
    [[getDialogTitle_(mode)]]
  </div>
  <div slot="body">
    <cr-input id="apnInput" value="{{apn_}}" label="[[i18n('apn')]]"
        type="text" invalid="[[isApnInputInvalid_]]"
        error-message="[[getApnErrorMessage_(isApnInputInvalid_, apn_,
            isMaxApnInputLengthReached_)]]"
        disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]">
    </cr-input>
    <cr-input id="usernameInput" value="{{username_}}"
        label="[[i18n('OncCellular-APN-Username')]]" type="text"
        disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]">
    </cr-input>
    <cr-input id="passwordInput" value="{{password_}}"
        label="[[i18n('OncCellular-APN-Password')]]" type="password"
        disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]">
    </cr-input>
    <cr-expand-button id="advancedSettingsBtn"
        class="advanced-settings cr-row"
        expanded="{{advancedSettingsExpanded_}}">
      <div>[[i18n('apnDetailAdvancedSettings')]]</div>
    </cr-expand-button>
    <iron-collapse opened="[[advancedSettingsExpanded_]]">
      <!-- TODO(b/162365553): Add validation. -->
      <div id="authenticationTypeSelection" class="dropdown-section">
        <div id="authenticationTypeLabel" class="cr-form-field-label">
          [[i18n('apnDetailAuthType')]]
        </div>
        <select id="authTypeDropDown" class="select-field md-select"
            value="{{selectedAuthType_::change}}"
            disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]"
            aria-labelledby="authenticationTypeLabel">
          <template is="dom-repeat"
              items="[[AuthenticationTypes]]">
            <option value="[[item]]"
                selected="[[isSelectedAuthType_(item)]]">
              [[getAuthTypeLocalizedLabel_(item)]]
            </option>
          </template>
        </select>
      </div>
      <div class="cr-form-field-label">
        [[i18n('apnDetailApnTypes')]]
      </div>
      <div id="checkboxContainer" class="checkbox-section">
        <cr-checkbox id="apnDefaultTypeCheckbox"
            aria-labelledby="apnDefaultTypelabel"
            disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]"
            checked="{{isDefaultApnType_}}">
          <div id="apnDefaultTypelabel" class="checkbox-text-area">
            [[i18n('apnDetailApnTypeDefault')]]
          </div>
        </cr-checkbox>
        <cr-checkbox id="apnAttachTypeCheckbox"
            disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]"
            aria-labelledby="apnAttachTypeLabel"
            checked="{{isAttachApnType_}}">
          <div id="apnAttachTypeLabel" class="checkbox-text-area">
            [[i18n('apnDetailApnTypeAttach')]]
          </div>
        </cr-checkbox>
        <template is="dom-if" if="[[shouldShowApnTypeErrorMessage_]]" restamp>
          <div id="defaultApnRequiredInfo" class="default-apn-info">
            <iron-icon icon="cr:info-outline"></iron-icon>
            <span>[[i18n('apnDetailDefaultApnRequired')]]</span>
          </div>
        </template>
      </div>
      <div id="ipTypeSelection" class="dropdown-section">
        <div id="ipTypeLabel" class="cr-form-field-label">
          [[i18n('apnDetailIpType')]]
        </div>
        <select id="ipTypeDropDown" class="md-select select-field"
            value="{{selectedIpType_::change}}"
            disabled="[[isUiElementDisabled_(UiElement.INPUT, mode)]]"
            aria-labelledby="ipTypeLabel">
          <template is="dom-repeat"
              items="[[IpTypes]]">
            <option value="[[item]]"
                selected="[[isSelectedIpType_(item)]]">
              [[getIpTypeLocalizedLabel_(item)]]
            </option>
          </template>
        </select>
      </div>
    </iron-collapse>
    <div class="cr-row-line cr-row"></div>
  </div>
  <div slot="button-container">
    <template is="dom-if"
        if="[[isUiElementVisible_(UiElement.ACTION_BUTTON, mode)]]" restamp>
      <cr-button id="apnDetailCancelBtn" class="cancel-button"
          on-click="onCancelClicked_">
        [[i18n('apnDetailDialogCancel')]]
      </cr-button>
      <cr-button id="apnDetailActionBtn" class="action-button"
          on-click="onActionButtonClicked_"
          disabled="[[isUiElementDisabled_(UiElement.ACTION_BUTTON, mode,
              apn_, isApnInputInvalid_, shouldShowApnTypeErrorMessage_,
              isDefaultApnType_, isAttachApnType_)]]">
        [[getActionButtonTitle_(mode)]]
      </cr-button>
    </template>
    <template is="dom-if"
        if="[[isUiElementVisible_(UiElement.DONE_BUTTON, mode)]]" restamp>
      <cr-button id="apnDoneBtn" class="action-button"
          on-click="onCancelClicked_">
        [[i18n('apnDetailDialogDone')]]
      </cr-button>
    </template>
  </div>
</cr-dialog>